import React from 'react';
import ReactDOM from 'react-dom';
import '../css/reset.css';
import '../css/style.css';

//获取图片信息相关数据
let imageDatas =require('json!../data/imageData.json');

//处理图片信息的相关函数,采用es6箭头函数处理信息,并用自执行函数处理，自执行函数指的是在

imageDatas = ((images) =>{

  for(let i=0;i<images.length;i++){
    images[i].url =require('../images/'+images[i].fileName);

  }

  return images;

})(imageDatas);

//图片组件部分,注意组件首字母一定要大写，否则无法被识别为组件
class ImageList extends React.Component {

  constructor(props){
    super(props);
  }

  render(){
    var styleObj = this.props.styleObj;
    var liFigures = [],
    liclassName;
    imageDatas.forEach((value,index) => {
      liclassName = "item" + index;
      liFigures.push(<li key={index} className={liclassName}><img src={imageDatas[index].url} /></li>)

    });

    return (
      <ul className="img-content" style={styleObj}>{liFigures}</ul>
    );
  }

}

//轮播控制组件

class ControllerUnit extends React.Component {

  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e){

    this.props.changed();
  }

  render(){
    let imgCircleClassName = "img-circle",
        innerCircleClassName = 'inner-circle',
        outerCircleClassName = 'outer-circle';

        if(this.props.curindex == this.props.index){
          imgCircleClassName += ' img-circle-focus';
        }else{
          innerCircleClassName += ' inner-circle-normal';
          outerCircleClassName += ' outer-circle-normal';
        }

    return (
      <div className={imgCircleClassName}><div className={outerCircleClassName} onClick={this.handleClick}><span className={innerCircleClassName}></span></div></div>
      )
  }
}

//APP组件部分

class AppComponent extends React.Component {

  constructor(props){
    super(props);
    this.state = {

      imgIndex : 0,

      leftPos : 0

    }

    this.timer = null;
    this.MouseoverHandle =this.MouseoverHandle.bind(this);
    this.MouseoutHandle =this.MouseoutHandle.bind(this);

  }

  changeImg(curindex){

      let left = curindex * (-440);

      this.setState({
        imgIndex : curindex,
        leftPos : left
      });
  }

  changed(curindex){
    return () => {
      this.changeImg(curindex);
    }
  }

  componentDidMount(){

    this.timer=setInterval(() =>{
    let index =(this.state.imgIndex) + 1;
    if(index >=5){
      index=0;
    }
    let left = index * (-440);

    this.setState({
      imgIndex : index,
      leftPos : left
    });
    },3000);
  }

  MouseoverHandle(){
    //清除定时器的方法
    clearInterval(this.timer);
  }

  MouseoutHandle(){

    this.timer=setInterval(() =>{
    let index =(this.state.imgIndex) + 1;
    if(index >=5){
      index=0;
    }
    let left = index * (-440);

    this.setState({
      imgIndex : index,
      leftPos : left
    });
    },3000);



  }





  render(){
    var ControllerUnits =[];
    imageDatas.forEach((value,index) =>{

      ControllerUnits.push(<ControllerUnit key={index}
                                           curindex={this.state.imgIndex}
                                           index={index}
                                           changed={this.changed(index)}/>);

    });


    return(
      <div className="img-list-container" onMouseOver = {this.MouseoverHandle}
                                          onMouseOut = {this.MouseoutHandle}>
        <ImageList styleObj={{"left" : this.state.leftPos}}/>
        <div className ="link-copy"></div>
        <div className="link">
          <span>更多</span>
          <span>&gt;</span>
        </div>
        <div className = "img-list-bottom">
        <p className="img-desc">{imageDatas[this.state.imgIndex].desc}</p>
        <div className="controller-units-list">{ControllerUnits}</div>
        </div>
      </div>

      );

  }
}

export default AppComponent;




